@let pool = poolId();
<ix-page-header [pageTitle]="pageTitle">
  <a
    *ixRequiresRoles="requiredRoles"
    mat-button
    color="primary"
    ixTest="add-vdev"
    [routerLink]="['/storage', pool, 'add-vdevs']"
  >
    {{ 'Add VDEV' | translate }}
  </a>
</ix-page-header>

@if (pool) {
  @let selectedNode = selectedNode$ | async;
  @let showDetails = !masterList.filterString || selectedNode.disk.toLowerCase().includes(masterList.filterString.toLowerCase());

  <ix-master-detail-view
    #masterDetailView="masterDetailViewContext"
    [selectedItem]="selectedNode"
    [showDetails]="showDetails"
    >
    <ix-vdevs-list
      #masterList
      master
      [poolId]="pool"
      [isMobileView]="isMobileView()"
      (showMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
    ></ix-vdevs-list>

    <ng-container detail-header>
      @if (selectedNode) {
        <span>{{ 'Details for ' | translate }}</span>
        <ix-topology-item-icon
          class="title-icon"
          [topologyItem]="selectedNode | cast"
          [disk]="vDevsStore.getDisk(selectedNode.children[0] || selectedNode)"
        ></ix-topology-item-icon>
        <span class="device-name">
          {{ getTitle(selectedNode | cast) | translate }}
        </span>
      }
    </ng-container>

    <ng-container detail>
      @if (selectedNode) {
        <ix-disk-details-panel
          [topologyItem]="selectedNode | cast"
          [topologyParentItem]="selectedParentNode$ | async | cast"
          [disk]="vDevsStore.getDisk(selectedNode.children?.[0] || selectedNode)"
          [poolId]="pool"
          [hasTopLevelRaidz]="!!(hasTopLevelRaidz$ | async)"
          [topologyCategory]="selectedTopologyCategory$ | async"
          (closeMobileDetails)="masterDetailView.toggleShowMobileDetails(false)"
        ></ix-disk-details-panel>
      }
    </ng-container>
  </ix-master-detail-view>
}
